<template>
  <div class="row">
    <div v-show="flag === 1">欢迎光临</div>
    <div v-show="flag === 2">loding</div>
    <div class="card" v-for="item in info" :key="item.id" v-show="flag === 3">
      <a :href="item.html_url">
        <img :src="item.avatar_url" style="width: 100px" />
      </a>
      <p class="card-text">{{ item.login }}</p>
    </div>
    <div v-show="flag === 4">加载失败</div>
  </div>
</template>

<script>
import requst from "../api/requst";
export default {
  data() {
    return {
      info: JSON.parse(localStorage.getItem("nihao")) || [],
      flag: 1,
    };
  },
  mounted() {
    this.$bus.$on("bigboss", async (msg) => {
      this.flag = 2;
      try {
        let res = await requst.get(`/search/users?q=${msg}`);
        this.info = res.items;
        this.flag = 3;
      } catch (error) {
        this.flag = 4;
      }
    });
  },
  watch: {
    info: {
      deep: true,
      handler() {
        localStorage.setItem("nihao", JSON.stringify(this.info));
      },
    },
  },
};
</script>

<style scoped></style>
